
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useLanguage } from "@/contexts/LanguageContext";
import { Lightbulb, Users, Clock, Star, Eye, Download } from "lucide-react";

const PBLWorkshop = () => {
  const { t } = useLanguage();

  const cases = [
    {
      title: "Smart City Design Challenge",
      description: "Students design sustainable urban solutions addressing transportation, energy, and waste management.",
      duration: "4 weeks",
      grade: "9-12",
      subject: "STEM",
      skills: ["Problem Solving", "Collaboration", "Critical Thinking"],
      rating: 4.9,
      views: 2840
    },
    {
      title: "Community Health Initiative",
      description: "Analyze local health data and propose evidence-based interventions for community wellness.",
      duration: "3 weeks",
      grade: "6-8",
      subject: "Health Science",
      skills: ["Data Analysis", "Research", "Communication"],
      rating: 4.7,
      views: 1950
    },
    {
      title: "Historical Documentary Project",
      description: "Create multimedia presentations exploring untold stories from local history.",
      duration: "6 weeks",
      grade: "9-12",
      subject: "History",
      skills: ["Research", "Media Production", "Storytelling"],
      rating: 4.8,
      views: 1620
    }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              {t('pbl.title')}
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl">
              {t('pbl.subtitle')}
            </p>
          </div>

          {/* Featured Case Study */}
          <Card className="mb-8 bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
            <CardContent className="p-8">
              <div className="flex items-center gap-2 mb-4">
                <Lightbulb className="w-6 h-6 text-green-600" />
                <Badge className="bg-green-100 text-green-700">{t('pbl.featured')}</Badge>
              </div>
              <h2 className="text-2xl font-bold mb-3 text-gray-900">
                Climate Change Solutions Lab
              </h2>
              <p className="text-gray-700 mb-4">
                An interdisciplinary project where students research, design, and prototype solutions to address climate change impacts in their local community.
              </p>
              <div className="flex flex-wrap gap-2 mb-4">
                <Badge variant="outline">Climate Science</Badge>
                <Badge variant="outline">Engineering</Badge>
                <Badge variant="outline">Policy</Badge>
                <Badge variant="outline">Grades 9-12</Badge>
              </div>
              <Button className="bg-green-600 hover:bg-green-700">
                {t('pbl.exploreCase')}
              </Button>
            </CardContent>
          </Card>

          {/* Case Studies Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-8">
            {cases.map((caseStudy, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex justify-between items-start mb-2">
                    <div className="flex items-center gap-2">
                      <Clock className="w-4 h-4 text-gray-500" />
                      <span className="text-sm text-gray-600">{caseStudy.duration}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm text-gray-600">{caseStudy.rating}</span>
                    </div>
                  </div>
                  <CardTitle className="text-lg">{caseStudy.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4 text-sm leading-relaxed">
                    {caseStudy.description}
                  </p>
                  
                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500">{t('pbl.grade')}:</span>
                      <span>{caseStudy.grade}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500">{t('pbl.subject')}:</span>
                      <span>{caseStudy.subject}</span>
                    </div>
                  </div>

                  <div className="mb-4">
                    <p className="text-sm text-gray-500 mb-2">{t('pbl.skills')}:</p>
                    <div className="flex flex-wrap gap-1">
                      {caseStudy.skills.map((skill, skillIndex) => (
                        <Badge key={skillIndex} variant="secondary" className="text-xs">
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </div>

                  <div className="flex items-center justify-between text-sm text-gray-500 mb-4">
                    <div className="flex items-center gap-1">
                      <Eye className="w-4 h-4" />
                      <span>{caseStudy.views} {t('pbl.views')}</span>
                    </div>
                  </div>

                  <div className="flex gap-2">
                    <Button size="sm" className="flex-1">
                      {t('pbl.useCase')}
                    </Button>
                    <Button variant="outline" size="sm">
                      <Download className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Create Your Own Section */}
          <Card className="bg-purple-50 border-purple-200">
            <CardContent className="p-6 text-center">
              <Users className="w-12 h-12 text-purple-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2 text-gray-900">
                {t('pbl.createTitle')}
              </h3>
              <p className="text-gray-600 mb-4">
                {t('pbl.createSubtitle')}
              </p>
              <Button className="bg-purple-600 hover:bg-purple-700">
                {t('pbl.startCreating')}
              </Button>
            </CardContent>
          </Card>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default PBLWorkshop;
